<template>
  <div class="phone-content-wrap">
    <van-nav-bar
      title="密码修改"
      left-arrow
      @click-left="$router.back()"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>

    </van-nav-bar>
    <div class="phone-wrap">
      <van-field
        v-model="form.username"
        center
        clearable
        label="手机号"
        placeholder="请输入手机号"
      />

      <van-field
        v-model="form.password"
        center
        clearable
        label="密码"
        placeholder="请输入密码"
      />
      <van-field
        v-model="confirmPassword"
        center
        clearable
        label="确认密码"
        placeholder="请输入确认密码"
      />

      <van-field
        v-model="form.code"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-count-down :time="time" ref="countDown">
            <template #default="timeData">
              <van-button v-if="timeData.seconds<=0" @click="sendSms" size="small"
                          color="linear-gradient(to right, #ff6034, #ee0a24)">
                发送验证码
              </van-button>
              <van-button v-else disabled size="small" class="un-clickable" type="primary">
                {{ timeData.seconds }}秒后重发
              </van-button>
            </template>
          </van-count-down>
        </template>
      </van-field>
    </div>
    <div class="submit-button">
      <van-button type="primary" block round size="small"
                  color="linear-gradient(to right, #ff6034, #ee0a24)"
      @click="register">
        注册
      </van-button>
      <van-button class="to-login" plain  type="primary" block round size="small"
                  color="#c5c5c5" @click="$router.back()">
        已有账号？返回登录
      </van-button>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
import {authRegisterCaptcha, authRegister} from '@/api/user'

export default {
  name: 'password',
  methods: {
    register () {
      let password = this.form.password
      if (password != null || password !== undefined || password !== '') {
        if (password.length >= 6) {
          if (password === this.confirmPassword) {
            this.registUser()
          } else {
            Toast.fail('两次输入密码不同')
          }
        } else {
          Toast.fail('密码长度需大于六位')
        }
      } else {
        Toast.fail('请输入密码')
      }
    },
    registUser () {
      this.$set(this.form, 'mobile', this.form.username)
      authRegister(this.form).then(res => {
        Toast('注册成功，请登录')
        this.$router.back()
      }).catch(error => {
        Toast.fail(error.data.errmsg)
      })
    },
    sendSms () {
      if (/^1[34578]\d{9}$/.test(this.form.username)) {
        authRegisterCaptcha({mobile: this.form.username}).then(res => {
          this.time = 10 * 1000
          this.$refs.countDown.reset()
          Toast('验证码已发送到您的手机，请注意查收')
        }).catch(error => {
          Toast.fail(error.data.errmsg)
        })
      } else {
        Toast.fail('请输入正确手机号')
      }
    }

  },
  data () {
    return {
      time: 0,
      sms: '',
      form: {},
      confirmPassword: '',
      phone: this.$store.getters.getUserPhone
    }
  }
}
</script>

<style scoped>
.notify-message {
  flex: 1;
  font-size: 12px;
  color: #E65D6E;
}
.to-login{
  margin-top: 20px;
  color: black;
}
.un-clickable {
  color: #c5c5c5;
  background: white;
  border: 1px #c5c5c5 solid;
}

.phone-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.phone-content-wrap {
  height: 100%;
  background: white;
}

.submit-button {
  margin-top: 30px;
  padding: 10px;
}
</style>
